<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg t="1692774292882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3914" width="50" height="50">
            <path
              d="M879.061333 384c59.136 47.573333 37.688889 373.333333-95.288889 497.777778H243.896889c-140.16-149.020444-158.805333-389.731556-95.288889-497.777778h730.453333zM753.777778 924.444444v14.222223H284.444444v-14.222223h469.333334z m97.393778-827.221333c53.504 26.965333 74.524444 91.52 46.848 143.644445-12.942222 24.433778-34.346667 45.795556-58.936889 54.741333L812.8 341.333333H597.333333l64.711111-122.140444a103.779556 103.779556 0 0 1 8.519112-76.273778c27.648-52.152889 127.089778-72.675556 180.622222-45.696zM474.069333 469.333333v90.097778H384v90.083556h90.069333V739.555556h90.083556v-90.040889H654.222222v-90.083556h-90.069333V469.333333h-90.083556z"
              fill="#31CD78" p-id="3915"></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            药剂
          </div>
          <count-to :start-val="0" :end-val="lineChartData.newVisitis.value" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg t="1692774170322" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2781" width="50" height="50">
            <path
              d="M507.904 65.125333l34.496 34.325334c43.061333 42.848 67.888 96.970667 74.48 152.816l16.549333-16.474667a32 32 0 0 1 45.141334 0l34.496 34.325333c43.061333 42.848 67.888 96.970667 74.48 152.816l16.549333-16.474666a32 32 0 0 1 45.141333 0l34.496 34.325333c101.690667 101.189333 101.690667 265.242667 0 366.432l-15.674666 15.589333 103.904 103.898667a32 32 0 0 1 0.933333 44.282667l-0.933333 0.976a32 32 0 0 1-44.282667 0.933333l-0.976-0.933333-103.893333-103.904-15.594667 15.674666c-101.189333 101.690667-265.242667 101.690667-366.432 0l-34.325333-34.496a32 32 0 0 1 0-45.141333l16.474666-16.549333c-55.845333-6.592-109.973333-31.418667-152.816-74.48l-34.325333-34.496a32 32 0 0 1 0-45.141334l16.474667-16.549333c-55.845333-6.592-109.973333-31.418667-152.816-74.48l-34.325334-34.496a32 32 0 0 1 0-45.141333l34.325334-34.496C171.456 355.904 275.301333 335.04 365.669333 365.658667 335.04 275.306667 355.904 171.456 428.266667 99.450667l34.496-34.325334a32 32 0 0 1 45.141333 0z m-21.754667 749.621334L474.288 826.666667l11.861333 11.92c76.170667 76.549333 199.530667 76.549333 275.701334 0l11.861333-11.92-11.861333-11.92c-76.170667-76.549333-199.530667-76.549333-275.701334 0zM826.666667 474.288l-11.92 11.861333c-76.549333 76.170667-76.549333 199.530667 0 275.701334l11.92 11.861333 11.92-11.861333c76.549333-76.170667 76.549333-199.530667 0-275.701334L826.666667 474.288z m-511.184 169.792L303.621333 656l11.861334 11.92c76.170667 76.549333 199.530667 76.549333 275.701333 0l11.861333-11.92-11.861333-11.92c-76.170667-76.549333-199.530667-76.549333-275.701333 0z m379.637333 10.32l-16.549333 16.474667c-1.317333 1.306667-2.72 2.48-4.186667 3.514666a32.165333 32.165333 0 0 1-3.509333 4.181334l-16.474667 16.549333a258.186667 258.186667 0 0 1 52.597333 11.872 257.936 257.936 0 0 1-11.877333-52.586667zM656 303.626667l-11.92 11.861333c-76.549333 76.170667-76.549333 199.530667 0 275.701333l11.92 11.861334 11.92-11.861334c76.549333-76.170667 76.549333-199.530667 0-275.701333L656 303.621333zM144.816 473.413333L132.954667 485.333333l11.861333 11.92c76.170667 76.549333 199.530667 76.549333 275.701333 0L432.378667 485.333333l-11.861334-11.92c-76.170667-76.549333-199.530667-76.549333-275.701333 0zM524.453333 483.733333l-16.549333 16.474667c-1.317333 1.306667-2.72 2.48-4.186667 3.514667a32.165333 32.165333 0 0 1-3.509333 4.181333L483.733333 524.453333a258.186667 258.186667 0 0 1 52.597334 11.872 257.936 257.936 0 0 1-11.877334-52.586666zM485.333333 132.96l-11.92 11.861333c-76.549333 76.170667-76.549333 199.530667 0 275.701334L485.333333 432.378667l11.92-11.861334c76.549333-76.170667 76.549333-199.530667 0-275.701333L485.333333 132.954667zM52.037333 233.370667a32 32 0 0 1 45.258667 0l53.333333 53.333333 0.933334 0.976a32 32 0 0 1-46.186667 44.282667l-53.333333-53.333334-0.938667-0.976a32 32 0 0 1 0.933333-44.282666z m0-181.333334a32 32 0 0 0-0.933333 44.282667l0.933333 0.976 186.666667 186.666667a32 32 0 0 0 46.192-44.282667l-0.933333-0.976-186.666667-186.666667a32 32 0 0 0-45.258667 0z m181.333334 0a32 32 0 0 0-0.933334 44.282667l0.933334 0.976 53.333333 53.333333a32 32 0 0 0 46.192-44.282666l-0.933333-0.976-53.333334-53.333334a32 32 0 0 0-45.258666 0z"
              fill="#00A3F4" p-id="2782"></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            药材
          </div>
          <count-to :start-val="0" :end-val="lineChartData.messages.value" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg t="1692774327415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4978" width="50" height="50">
            <path
              d="M217.668267 916.650667h589.380266V173.397333l-99.4304-0.750933c-11.707733 18.2272-21.981867 27.648-30.8224 28.2624-32.768 0.546133-317.474133 0.6144-328.840533 0-7.5776-0.443733-15.1552-9.591467-22.801067-27.511467h-107.52v743.287467z"
              fill="#C6EBEC" p-id="4979"></path>
            <path
              d="M661.845333 9.898667c14.336 0 25.6 11.264 25.6 25.6l-0.068266 34.747733 191.010133 0.034133c14.336 0 25.6 11.264 25.6 25.6v891.904c0 14.336-11.264 25.6-25.6 25.6H148.2752c-14.336 0-25.6-11.264-25.6-25.6V95.914667c0-14.336 11.264-25.6 25.6-25.6h190.941867l0.034133-34.816c0-14.336 11.264-25.6 25.6-25.6h296.96zM339.182933 121.412267l-165.341866 0.034133v840.704h678.912V121.514667h-165.410134l0.034134 40.448c0 14.336-11.264 25.6-25.6 25.6h-296.96c-14.336 0-25.6-11.264-25.6-25.6V121.4464z m407.790934 647.0656c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6H278.016c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h468.992z m0-136.704c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6H278.016c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h468.992zM514.048 264.704c14.336 0 25.6 11.264 25.6 25.6v82.5344l86.357333 0.034133c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6h-86.357333v83.319467c0 14.336-11.264 25.6-25.6 25.6s-25.6-11.264-25.6-25.6v-83.3536l-79.530667 0.034133c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h79.530667V290.269867c0-14.336 11.264-25.6 25.6-25.6z m122.197333-203.639467h-245.76v75.264h245.76V61.098667z"
              fill="#11AEB0" p-id="4980"></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            医案
          </div>
          <count-to :start-val="0" :end-val="lineChartData.purchases.value" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg t="1692774388636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="7069" width="50" height="50">
            <path
              d="M957.873705 619.591014c-30.714607-44.536179-90.608089-46.07191-97.262921-46.07191h-61.429213v-19.452584c0-55.798202-51.191011-55.798202-51.191011-55.798202H106.567194c-56.822022 0-56.822022 55.798202-56.822022 55.798202v86.512809c0 140.77528 71.155505 251.859773 178.144718 311.753256v33.786067c0 20.988314 16.893034 37.881348 37.881348 37.881348h317.384267c20.988314 0 37.881348-16.893034 37.881348-37.881348V952.332585c38.393258-21.500225 72.691235-50.167191 100.846292-84.465168 90.608089-3.583371 199.644942-26.107416 240.597751-134.120449 17.404944-46.07191 15.869213-84.465168-4.607191-114.155954z m-61.429213 88.560449c-17.916854 47.60764-57.845842 74.226966-129.001348 84.465168 20.988314-47.09573 31.738427-97.774831 31.738427-148.965842h61.429213c9.726292 0 31.738427 4.095281 39.928988 15.869214 5.631011 9.214382 4.095281 26.619326-4.09528 48.63146z"
              fill="#3366FF" p-id="7070"></path>
            <path
              d="M336.926743 302.206747c0 86.512808 102.893932 138.727639 102.893932 138.727639-15.357303-61.429213 9.214382-110.572583 67.060224-145.894381 79.346067-48.63146 126.953707-74.226966 126.953707-151.525392 0-72.179325-63.988764-160.227864-266.193257-140.77528 0 0 103.917752 29.690786 90.60809 125.417977-7.166742 47.60764-121.834606 92.14382-121.322696 174.049437z"
              fill="#AEC9FF" p-id="7071"></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            养生知识
          </div>
          <count-to :start-val="0" :end-val="lineChartData.shoppings.value" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  props: ["lineChartData"],
  components: {
    CountTo
  },
  data() {
    return {
      chartData: {
        newVisitis: {
          actualData: null
        },
        messages: {
          actualData: null
        },
        purchases: {
          actualData: null
        },
        shoppings: {
          actualData: null
        }
      }
    };
  },
  created() {
    this.chartData = this.lineChartData;
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}</style>
